<template>
    <div class="star" :class="starType">
        <div v-for="(item,key) in itemClasses" :key="key" :class="item" class="star-item"></div>
    </div>
</template>
<script>
const LENGTH = 5
const CLS_ON = 'on'
const CLS_HALF = 'half'
const CLS_OFF = 'off'
export default {
    props:['size','score'],
    data() {
        return {
        }
    },
    computed: {
        starType(){
            return 'size-'+this.size
        },
        itemClasses(){
            let result = []
            let score = Math.floor(this.score*2)/2
            let hasDecimal = score%1 !==0;
            let integer = Math.floor(score)
            for(let i=0;i<integer;i++){
                result.push(CLS_ON)
            }
            if(hasDecimal){
                result.push(CLS_HALF)
            }
            while(result.length<LENGTH){
                result.push(CLS_OFF)
            }
            return result
        }
    },
    
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/mixin.styl'
.star
    font-size 0px
    &.size-48
        .star-item
            float left
            width 20px
            height 20px
            margin-right 22px
            background-size 20px 20px
            &:last-child
                margin-right 0
            &.off
                bg-img('star48_off')
            &.on
                bg-img('star48_on')
            &.half
                bg-img('star48_half')
    &.size-36
        .star-item
            float left
            width 15px
            height 15px
            margin-right 16px
            background-size 15px 15px
            &:last-child
                margin-right 0
            &.on
                bg-img('star36_on')
            &.half
                bg-img('star36_half')
            &.off
                bg-img('star36_off')
    &.size-24
        .star-item
            float left
            width 10px
            height 10px
            margin-right 3px
            background-size 10px 10px
            &:last-child
                margin-right 0
            &.on
                bg-img('star24_on')
            &.half
                bg-img('star24_half')
            &.off
                bg-img('star24_off')
    .star-item
        background-repeat no-repeat
        
</style>

